<template>
  <a-space direction="vertical" :style="{ display: 'flex', width: '100%' }" :size="[0, 48]">
    <a-layout>
      <a-layout-sider :style="siderStyle">
        <Sider />
      </a-layout-sider>
      <a-layout>
        <!-- <a-layout-header :style="headerStyle">Header</a-layout-header> -->
        <a-layout-content :style="contentStyle">
          <a-card><router-view /></a-card>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-space>
</template>

<script setup>
import Sider from './components/Sider.vue';
const headerStyle = {
  color: '#fff',
  height: 64,
  backgroundColor: '#7dbcea',
};

const contentStyle = {
  minHeight: 120,
  maxHeight: '100vh',
  overflow: 'auto',
  padding: '24px',
  backgroundColor: '#fff',
};

const siderStyle = {
  height: '100vh',
  color: '#fff',
  backgroundColor: '#001628',
  overflow: 'auto',
};
</script>
